<template>
  <el-dialog
    v-model="visible"
    :title="$t('contacts.friendDetail.title')"
    width="500px"
    :before-close="handleClose"
  >
    <div v-if="friend" class="friend-detail">
      <!-- 好友基本信息 -->
      <div class="friend-header">
        <el-avatar :src="friend.avatarUrl" :size="80">
          {{ friend.realName?.charAt(0) || friend.username.charAt(0) }}
        </el-avatar>
        <div class="friend-info">
          <h3 class="friend-name">
            {{ friend.realName || friend.username }}
            <el-tag v-if="friend.userType === 'VIP'" type="warning" size="small">VIP</el-tag>
            <el-tag v-if="friend.userType === 'ADMIN'" type="danger" size="small">{{ $t('contacts.friend.userTypes.admin') }}</el-tag>
          </h3>
          <p class="friend-username">@{{ friend.username }}</p>

        </div>
      </div>

      <!-- 好友详细信息 -->
      <div class="friend-details">
        <div class="detail-item">
          <label>{{ $t('contacts.friendDetail.remarkName') }}</label>
          <span>{{ friend.remark || $t('common.none') }}</span>
        </div>
        <div class="detail-item">
          <label>{{ $t('contacts.friendDetail.belongsToGroup') }}</label>
          <span>{{ friend.groupName || $t('contacts.groups.defaultGroup') }}</span>
        </div>
        <div class="detail-item">
          <label>{{ $t('contacts.friendDetail.addedTime') }}</label>
          <span>{{ formatDate(friend.createdAt) }}</span>
        </div>
        <div class="detail-item">
          <label>{{ $t('contacts.friendDetail.userType') }}</label>
          <span>{{ getUserTypeText(friend.userType) }}</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="friend-actions">
        <el-button type="primary" @click="handleChat" :icon="Message">
          {{ $t('contacts.messages.sendMessage') }}
        </el-button>
        <el-button @click="handleEdit" :icon="Edit">
          {{ $t('contacts.editFriend.title') }}
        </el-button>
        <el-button type="danger" @click="handleDelete" :icon="Delete">
          {{ $t('contacts.friend.actions.deleteFriend') }}
        </el-button>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">{{ $t('common.close') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Message, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { useContactsStore } from '@/stores/contacts'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'

// Props & Emits
const props = defineProps<{
  modelValue: boolean
  friend?: any
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'edit': [friend: any]
  'delete': [friend: any]
  'chat': [friend: any]
}>()

// 状态管理
const contactsStore = useContactsStore()

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 方法
const handleClose = () => {
  visible.value = false
}

const handleChat = () => {
  emit('chat', props.friend)
  visible.value = false
}

const handleEdit = () => {
  emit('edit', props.friend)
}

const handleDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除好友 "${props.friend?.realName || props.friend?.username}" 吗？`,
      '删除好友',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger'
      }
    )

    emit('delete', props.friend)
    visible.value = false
  } catch {
    // 用户取消
  }
}

const formatDate = (dateString: string) => {
  if (!dateString) return '未知'
  try {
    return new Date(dateString).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  } catch {
    return '未知'
  }
}

const formatLastSeen = (lastSeenAt: string) => {
  if (!lastSeenAt) return '离线'
  try {
    const date = new Date(lastSeenAt)
    return formatDistanceToNow(date, { addSuffix: true, locale: zhCN })
  } catch {
    return '离线'
  }
}

const getUserTypeText = (userType: string) => {
  const typeMap: Record<string, string> = {
    'BASIC': '普通用户',
    'VIP': 'VIP用户',
    'ADMIN': '管理员'
  }
  return typeMap[userType] || '未知'
}
</script>

<style scoped>
.friend-detail {
  padding: 16px 0;
}

.friend-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.friend-info {
  flex: 1;
}

.friend-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.friend-username {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.friend-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-regular);
}



.friend-details {
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--el-border-color-extra-light);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item label {
  width: 100px;
  font-weight: 500;
  color: var(--el-text-color-regular);
  flex-shrink: 0;
}

.detail-item span {
  color: var(--el-text-color-primary);
}

.friend-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .friend-header {
    flex-direction: column;
    text-align: center;
  }
  
  .friend-actions {
    flex-direction: column;
  }
}
</style>
